<template>
	<view> 
	<view class="seachh_box">
		<!-- 绑定输入事件 -->
			<uni-search-bar placeholder="请输入搜索内容" cancelButton="none "  clearButton="auto"  :radius="100" @confirm="search" @input="input"></uni-search-bar>
	</view>
	<!-- 列表建议渲染 -->
	<view class="sugList" v-if="searchResult.length != 0">
			<view class="sug_item" v-for="(item,index) in searchResult" :key="item.goods_id" @click="gotoDetail(item)">
				<view class="sug_item_left">
					{{item.goods_name}}
				</view>
				<uni-icons type="arrow-right" size="24"></uni-icons>
			</view>
	</view>
		<!-- 历史记录的渲染 -->
		<view class="history_box" v-else>
			<view class="history_box_title">
					<text>搜索历史</text>
					<uni-icons type="trash-filled" size="24" @click = "clean()"></uni-icons>
			</view>
			
			<view class="history_list_box">
				<view class="histlist_box_item"  v-for="(item1,index1) in  historyList" @click="goods_detail(item1)">
						<text>{{item1}}</text>
						<uni-icons type="closeempty" size="14" ></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer:null,
				//关键词的存储
				kw:"",
				//定义搜索的返回的数组
				searchResult:[],
				//历史记录模块
				historyList:["a","b阿萨"]
			};
		},
		onLoad(){
			// 在本地加载本地存储的搜索历史记录
			this.historyList=JSON.parse(uni.getStorageSync("kw")||'[]')
		},
		//监听history的值来变化
		computed:{
			history(){
				//由于数组是引类型的值，所以不能影响原数组里面的东西所以使用的是和元素组无关的值
				return [...this.historyList].reverse();
			}
		},
		methods:{
			//输入事件的事件处理函数
			input(e){
				clearTimeout(this.timer)
				this.timer=setTimeout(()=>{
					console.log(e);
					//把关键字赋值
					this.kw = e;
					this.getAd();
					
				},500)
				
			},
			//发起请求关键字获取数据
			async getAd(){
				//判断关键字是否为空 不能用null 用空的字符串 ，就返回的额搜索建议重置
				if(this.kw == ""){
					this.searchResult=[];
					return
				} 
				//发起请求
				const {data:res} = await uni.$http.get("/api/public/v1/goods/qsearch?query="+this.kw);
				// console.log("/api/public/v1/goods/qsearch?query="+this.kw)
				
				if(res.meta.status != 200 ){
					return uni.$showMsg();
				}
				this.searchResult = res.message;
				//将发起请求的关键词进行加入数组中
				this.historyList.unshift(this.kw);
				this.saveHistory();
				console.log(res +"res为"); 
				console.log(this.kw);
			},
			//点击进行跳转到商品详情页
			gotoDetail(item){
				uni.navigateTo({
					url:"/subpkg/goods_detail/goods_detail?goods_id="+item.goods_id
				})
			},
			//向历史记录中添加历史历史记录
			saveHistory(){
				const set = new Set(this.historyList);
				console.log(set);
				//为了保证元素的位置不会乱 先删除 再添加 在反转
				set.delete(this.kw);
				
				set.add(this.kw);
				//转化维数组
				this.historyList=Array.from(set);
				//将数据存到本地为 一个 key value 的值 
				uni.setStorageSync("kw",JSON.stringify(this.historyList))
				
			},
			clean(){
				//清空本的缓存 storage 和 当前数组
				this.historyList =[];
				uni.setStorageSync("kw","[]")
			},
			//跳转到商品详情页
			goods_detail(item){
				uni.navigateTo({
			 		url:"/subpkg/goods_list/goods_list?query="+item 
				})
			},
			
		},
		
	}
</script>

<style lang="scss"> 
.seachh_box{
	width: 100%;
	background-color: #c00;
	position: sticky;
	top: 0;
	z-index: 99;
	}
	uni-search-bar{
		background-color: #C000;
	}
	.sug_item{
		width: 100%;
		box-sizing: border-box;
		padding:10px 10px;
		display: flex;
		justify-content: space-between;	
		align-items: center;
		border-bottom: 1px solid #ccc;
		
	}
	.sug_item_left{
		width: 90%;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.history_box_title{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #ccc;
	
		
	}
	.history_box{
		
		padding: 0 10px;
	
	}
	.history_list_box{
		// display: grid;
		// grid-template-columns:repeat(5,1fr) ;
		// grid-columns-gap:20px;
		// grid-row-gap:20px;
		padding-top: 10px;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	
		
	}
	.histlist_box_item{
		// background-color: #eedbee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 10px;
		background-color:#efefef;
		max-width: 15%;
		padding: 5px;
		margin-left: 10px;
		
		// width: 10%;
	}
	.histlist_box_item text {
		white-space:nowrap;
		// padding-right: 10px;
		
		// max-width: 20%;
		
	}
</style>
